import styles from './SuccessView.less';
import { motion } from 'motion/react';
import img_success from '@/assets/images/img_success.png';
import { DIFFICULTY_OPTIONS } from '../stores/SudokuStore';
import { Difficulty } from "sudoku-gen/dist/types/difficulty.type";

export default ({ success, difficulty, gameTime }: { success: boolean, difficulty: Difficulty | 'begin', gameTime: string }) => {
    if (!success) {
        return null;
    }

    return (
        <motion.div
            className={styles.successLayout}
            initial={{
                scale: 0.8,
                rotateY: -180,
                opacity: 0,
            }}
            animate={{
                scale: 1,
                rotateY: 0,
                opacity: 1,
            }}
            transition={{ duration: 0.5 }}
        >
            <img src={img_success} />

            <div className={styles.successContent}>
                <div className={styles.row}>
                    <span className={styles.label}>难度</span>
                    <span className={styles.value}>{DIFFICULTY_OPTIONS.find(i => i.value == difficulty)?.label}</span>
                </div>
                
                <div className={styles.row}>
                    <span className={styles.label}>时间</span>
                    <span className={styles.value} style={{ fontFamily: 'Play', fontSize: 32 }}>
                        {gameTime || '00:00:00'}
                    </span>
                </div>
            </div>
        </motion.div>
    )
}
